<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>任务标注</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/scroll-bar.css">
    <link rel="stylesheet" href="../css/sub-page.css">
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../lib/nprogress/nprogress.css">
    <style>
        .site-demo-flow {
            width: 100%;
            height: 800px;
            overflow: auto;
            text-align: center;
        }

        .site-demo-flow img {
            width: 30%;
            height: auto;
            margin: 0 2px 5px 0;
            border: none;
        }
    </style>
</head>

<body>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

    <input class="layui-hide" id='id' value="">
    <input class="layui-hide" id='taskid' value="">
    <!--  <div class="ok-body">
        <div class="ok-body-breadcrumb" style="border-bottom: 0px solid #e5e5e5;">
            <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="下一项">
                <i class="layui-icon layui-icon-next">下一项</i>
            </a>
        </div>
    </div> -->
    <div class="layui-container" style="width:100%;">


        <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>标注</legend>
        </fieldset> -->

        <div class="layui-row">
            <div class="layui-col-xs5">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>待选区</legend>
                </fieldset>
                <div class="site-demo-flow" id="LAY_demo3">
                </div>
            </div>
            <div class="layui-col-xs1">
                <div style="background:white;">
                    <div class="ok-body">
                        <div class="ok-body-breadcrumb" style="border-bottom: 0px solid #e5e5e5;">
                            <a class="layui-btn layui-btn-small" id="pre_submit" title="上一项">
                                <i class="layui-icon layui-icon-previous">回看</i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs5">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>选定区</legend>
                </fieldset>
                <div class="site-demo-flow" id="checkedarea">

                </div>
            </div>
            <div class="layui-col-xs1">
                <div style="background:white;">
                    <div class="ok-body">
                        <div class="ok-body-breadcrumb" style="border-bottom: 0px solid #e5e5e5;">
                            <a class="layui-btn layui-btn-small" id="submit" title="下一项">
                                <i class="layui-icon layui-icon-next">下一项</i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/nprogress/nprogress.js"></script>
    <script src="../../js/config.js"></script>
    <script>
        NProgress.start();
        window.onload = function () {
            NProgress.done();
        }
        var spent = 0; //页面停留时长 （单位秒）
        var timer;

        function setDate() {
            spent++;
            //console.log('spent:' + spent);
            timer = setTimeout('setDate()', 1000);
        }
        var $;

        var pre_selected = [],
            pre_unselected = [];

        function load() {
            if (timer) {
                clearTimeout(timer);
            }
            spent = 0; //时间重置
            //内容区域重置
            $('#checkedarea').html('');
            $('#LAY_demo3').html('');

            if ((pre_selected.length + pre_unselected.length) > 0) {
                $('#pre_submit').show();
            } else {
                $('#pre_submit').hide();

            }

            $.ajax({
                url: '/workflow/gettaskitem',
                method: 'post',
                data: {
                    dsid: $('#id').val()
                },
                dataType: 'JSON',
                success: function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        if (res.data.length == 0) {
                            layer.msg('暂无待处理的任务', {
                                icon: 6,
                                time: 1000 //3秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                window.parent.layer.closeAll();
                            });
                        }
                        //加载数据
                        res.data.forEach(elem => {
                            var path = elem.path.replace(/\\/g, "/").replace(
                                new RegExp(share_folder_root, 'gm'),
                                'http://resource.westalgo.com');
                            $('#LAY_demo3').append(
                                '<img id="' + elem.resourceid +
                                '" src="' + path + '">');
                        });
                        setDate();
                    } else {
                        console.log('数据加载失败,自动重新加载中...');
                        load();
                    }
                },
                error: function (data) {}
            })
        }
        layui.use(['flow', 'element', 'form', 'jquery'], function () {
            var element = layui.element;
            var flow = layui.flow;
            $ = layui.jquery;

            load();

            $(document).on("click", "#LAY_demo3 img", function () {
                var src = $(this).attr('src');
                var imgid = $(this).attr('id');
                $('#checkedarea').append('<img id="' + imgid +
                    '" src=\"' + src + '\">');
                $('#LAY_demo3 #' + imgid).remove();
            });

            $(document).on("click", "#checkedarea img", function () {
                var src = $(this).attr('src');
                var imgid = $(this).attr('id');
                $('#LAY_demo3').append('<img id="' + imgid +
                    '" src=\"' + src + '\">');
                $('#checkedarea #' + imgid).remove();
            });

            $('#submit').click(function () {
                pre_unselected = [];
                pre_selected = [];

                //获取选取的数据项
                var imgArray = $('#checkedarea img');
                var selected = [];
                for (var i = 0; i < imgArray.length; i++) {
                    var element = imgArray[i];
                    var resourceid = $(element).attr('id');
                    selected.push(resourceid);
                    pre_selected.push({
                        resourceid: resourceid,
                        src: $(element).attr('src')
                    });
                }

                console.log(JSON.stringify(selected));

                //获取未选取的数据项
                var uncheck_imgArray = $('#LAY_demo3 img');
                var unselected = [];
                for (var i = 0; i < uncheck_imgArray.length; i++) {
                    var element = uncheck_imgArray[i];
                    var resourceid = $(element).attr('id');
                    unselected.push(resourceid);
                    pre_unselected.push({
                        resourceid: resourceid,
                        src: $(element).attr('src')
                    });
                }

                console.log(JSON.stringify(unselected));

                //提交数据
                $.ajax({
                    url: '/workflow/marksubmit',
                    method: 'post',
                    data: {
                        dsid: $('#id').val(),
                        taskid: $('#taskid').val(),
                        selectedids: JSON.stringify(selected),
                        unselectedids: JSON.stringify(unselected),
                        spent: spent,
                        currentflow: 'mark'
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {
                            //location.replace(location.href?id=$('#id').val()+'');
                            load();
                        } else if (res.code == -1) {
                            layer.msg(res.msg);
                            layer.closeAll();
                        } else {
                            layer.msg('数据处理失败');
                        }
                    },
                    error: function (data) {}
                })

            });
            //var repeat_flag=0;//重复处理标识
            $('#pre_submit').click(function () {
                $('#pre_submit').hide();
                if (timer) {
                    clearTimeout(timer);
                }
                spent = 0; //时间重置
                //内容区域重置
                $('#checkedarea').html('');
                $('#LAY_demo3').html('');

                pre_unselected.forEach(e => {
                    $('#LAY_demo3').append('<img id="' + e.resourceid +
                        '" src=\"' + e.src + '\">');
                });

                pre_selected.forEach(e => {
                    $('#checkedarea').append('<img id="' + e.resourceid +
                        '" src=\"' + e.src + '\">');
                });
            });
        });
    </script>

</body>

</html>